<template>
    <div>
        <!-- 1.3 获取到的父组件传递过来的数据 在template模版中使用 -->
        <div>{{ name }} {{ age }}</div>

        <button @click="emitsClick">子传父</button>
    </div>
</template>

<script setup>
/**
 * 1.1、通过 defineProps 获取父组件传递过来的数据
 */
const props = defineProps({
    name: {
        type: String,
        default: "默认值"
    },
    age: {
        type: Number,
        default: 0
    }
})
// 1.2、在 script 使用父组件传递过来的数据
console.log(props.name, props.age);



/**
 * 2、1、通过 defineEmits 创建事件、向父组件传递数据
 */
const emits = defineEmits(['emitsInfo'])
// 2.2、向父组件发送事件并传递参数
function emitsClick() {
    emits('emitsInfo', '子组件传递的数据')
}

</script>

<style lang="scss" scoped></style>